<template>
	<view class="listleft">
		<view class="author" @click.stop="goToAuthor">
			@{{left.author}}
		</view>
		<view class="title">
			{{left.title}}
		</view>
		<view class="music-box iconfont icon-douyin">
			<view class="music" :style="'animation-play-state:'+dataQuery">
				薛之谦-演员
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ListLeft",
		data() {
			return {
				dataQuery: 'running',
			};
		},
		props:{
			left: {
				default: null,
				type: Object,
			}
		},
		methods: {
			goToAuthor() {
				uni.navigateTo({
					url: '/pages/user/user?id='+this.left.id
				})
			},
			animationPlay() {
				this.dataQuery = this.dataQuery == 'running' ? 'paused':'running';
			}
		},
	}
</script>

<style lang="scss">
	.listleft {
		color: #FFFFFF;
		.author {
			height: 35px;
			line-height: 35px;
			font-size: 15px;
		}
		.title {
			line-height: 20px;
			font-size: 13px;
			width: 250px;
			word-wrap: break-word;
		}
		.music-box {
			width: 150px;
			font-size: 13px;
			height: 30px;
			line-height: 30px;
			margin-left: 15px;
			overflow: hidden;
			&:before {
				position: absolute;
				left: 0px;
			}
			.music {
				width: 170px;
				animation: roll 6s linear 0s infinite;
				animation-play-state: paused;
			}
		}
	}
	
	@keyframes roll {
		0% {
			transform: translate3d(150px,0,0 );
		}
		100% {
			transform: translate3d(-150px,0,0 );
		}
	}
</style>
